<template>
  <div>
    <el-dialog width="800px" title="订单详情" :footer="false" :visible.sync="isShowOilConfirm" center @closed="isShowOilConfirm = false">
      <span class="title">订单信息</span>
      <div class="wrap">
        <div><span>订单号</span><span>{{form.orderNo}}</span><span>订单状态</span><span>{{form.statusName}}</span></div>
        <div class="back all"><span>油品单价</span><span>{{form.unitPrice}}</span><span>取消人</span><span>{{form.cancellationOperator}}</span></div>
        <div><span>取消时间</span><span>{{form.cancelDt}}</span><span>取消原因</span><span>{{form.cancellationReason}}</span></div>
      </div>
      <!-- <span class="title">支付信息</span>
      <div class="wrap">
        <div><span>加油金额</span><span>2121</span><span>油号</span><span>2121</span></div>
        <div><span>枪号</span><span>2121</span><span>油品单价</span><span>2121</span></div>
        <div><span>升数</span><span>2212的</span><span>吨数</span><span>吧吧v</span></div>
      </div> -->
      <span class="title">用户信息</span>
      <div class="wrap">
        <div><span>用户手机号</span><span>{{form.customerPhone}}</span><span>--</span><span>--</span></div>
      </div>
      <span class="title">预约信息</span>
      <div class="wrap">
        <div><span>预约时间</span><span>{{form.orderDt}}</span><span>预约加油量（吨）</span><span>{{form.ton}}</span></div>
        <div class="back"><span>船名</span><span>{{form.shipNumber}}</span><span>MMSI</span><span>{{form.mmsi}}</span></div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { reservationOrderDetail } from '@/api/order'
export default {
  data () {
    return {
      formLabelWidth: '130px',
      isShowOilConfirm: false,
      form: {}
    }
  },
  methods: {
    init (params) {
      this.isShowOilConfirm = true
      const { orderNo } = params
      this.reservationOrderDetailApi(orderNo)
    },
    // 提交
    submit () {
      this.isShowOilConfirm = false
    },
    async reservationOrderDetailApi (orderNo) {
      try {
        const { code, result = {} } = await reservationOrderDetail({ orderNo })
        if(code !== 200) return
        this.form = result
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.search-btn{
  background: #3669EB;
}
.close{
  background: #eeeeee;
}
.plan{
  padding: 0 35px;
  text-align: center;
  color: #E31937;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
.title{
  display: inline-block;
  margin-top: 30px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
}
.wrap{
  margin-top: 10px;
  >div{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-self: center;
    >span{
      padding: 15px;
      border:1px solid #EEEEEE;
    }
    >span:nth-child(odd){
      width:30%;
      text-align: center;
      font-weight: 800;
      color: #999999;
    }
    >span:nth-child(even){
      width:70%;
      color: #333333;
      font-weight: blod;
    }
  }
  .back{
    >span{
      background: #FAFAFA;
      border-top: none;
    }
  }
  .all{
    >span{
      border-bottom: none;
    }
  }
}
</style>
